/******************** 变量 ********************/
$lv-dropdown-theme: $color-white !default;
$lv-dropdown-normal-color: $text-color !default;
$lv-dropdown-hover-color: $text-color !default;
$lv-dropdown-active-color: $primary-color !default;
$lv-dropdown-disabled-color: $text-color-disabled !default;

$lv-dropdown-background-hover: $item-background-hover !default;
$lv-dropdown-split-line: $separate-line-color !default;

$lv-dropdown-item-height-default: $height-base;
$lv-dropdown-item-height-large: $height-lg;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-dropdown-disabled {
  color: $text-color-disabled;

  &:hover {
    color: $text-color-disabled;
    cursor: not-allowed;
  }

  .lv-icon-host {
    color: $icon-color-disabled;
  }
}

.lv-dropdown-panel {
  width: 100%;
  min-width: 1rem;
  max-width: 4.72rem;
  max-height: $panel-height-base;
  margin: $margin-xs 0;
  padding: 0;
  overflow-y: auto;
  color: $text-color;
  font-size: $font-size-base;
  font-family: $font-family;
  line-height: $line-height-coeff;

  @include component-scroll;
  @include panel-default-style;

  &:not([class*='level0']) {
    margin-top: 0;
  }

  li {
    > .lv-dropdown-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: $lv-dropdown-item-height-default;
      padding: 0 $padding-sm;
      color: $lv-dropdown-normal-color;
      cursor: pointer;

      @include motion-state;

      > i {
        flex: 0 0 auto;

        &.i-trigger {
          margin-left: $margin-md;
          color: $icon-color-secondary;
        }

        &.i-icon {
          margin-right: $margin-xs;
        }
      }

      > span {
        display: inline-block;
        width: 100%;
      }

      &:not([disabled]):hover {
        background: $item-background-hover;
      }

      &:not([disabled]):active {
        @include panel-option-selected;

        > i {
          color: inherit;
        }
      }

      &[disabled] {
        color: $lv-dropdown-disabled-color;
        cursor: not-allowed;

        > i {
          color: $lv-dropdown-disabled-color;
        }
      }

      &.lv-dropdown-parent-hover {
        color: $lv-dropdown-hover-color;
        background: $lv-dropdown-background-hover;

        > i {
          color: $lv-dropdown-hover-color;
        }
      }
    }

    > .lv-dropdown-title {
      padding: $padding-sm $padding-sm $padding-xs;
      color: $text-color-secondary;
      font-size: $font-size-sm;
      line-height: $line-height-sm;
    }

    > .lv-dropdown-divider {
      margin: 0 $margin-sm;

      &::after {
        display: block;
        height: 0.01rem;
        background: $lv-dropdown-split-line;
        content: '';
      }
    }

    &.lv-dropdown-option-null {
      @include panel-dropdown-empty-style;
    }
  }
}

.lv-dropdown-size-large {
  &.lv-dropdown-panel {
    max-height: $panel-height-lg;
  }

  li > .lv-dropdown-item {
    height: $lv-dropdown-item-height-large;
  }
}

.lv-dropdown-z-index {
  z-index: $zindex-dropdown;
}
